<%@ page language="java" pageEncoding="utf8" %>
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script src="${ctx}/resource/js/jquery-1.9.1.min.js"></script>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

    <style type="text/css">
        .datagrid-mask {
            background: #ccc;
        }

        .datagrid-mask-msg {
            border-color: #95B8E7;
        }

        .datagrid-mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0.3;
            filter: alpha(opacity=30);
            display: none;
        }

        .datagrid-mask-msg {
            position: absolute;
            top: 50%;
            margin-top: -20px;
            padding: 12px 5px 10px 30px;
            width: auto;
            height: 16px;
            border-width: 2px;
            border-style: solid;
            display: none;
        }

        .list_table {
            border: 1px solid #CCCCCC;
            border-collapse: collapse;
            color: #333333;
            margin: 0 0 0;
            width: 100%;
        }

        .list_table tbody td {
            border-top: 1px solid #CCCCCC;
            text-align: left;
        }

        .list_table th {
            line-height: 1.2em;
            vertical-align: top;
        }

        .list_table td {
            line-height: 2em;
            font-size: 12px;
            vertical-align: central;
            align: left;
        }

        .list_table td input {
            width: 90%;
        }

        .list_table tbody tr:hover th, .list_table tbody tr:hover td {
            background: #EEF0F2;
        }

        .list_table thead tr {
            background: none repeat scroll 0 0 #09f;
            color: #fff;
            font-weight: bold;
            border-bottom: 1px solid #CCCCCC;
            border-right: 1px solid #CCCCCC;
        }
    </style>
</head>

<title>定时任务列表</title>

<body class="bgray">
<form id="addForm" method="post">

    <table class="list_table">
        <thead>
        <tr>
            <td>springId</td>
            <td>任务名称</td>
            <td>任务组</td>
            <td>是否开启</td>
            <td>运行状态</td>
            <td>cron表达式</td>
            <td>描述</td>
            <td>是否允许并发</td>
            <td>类路径</td>
            <td>方法名</td>
            <td>预警时间</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <c:forEach var="job" items="${taskList}">
            <tr>
                <td>${job.springId }</td>
                <td>${job.jobName }</td>
                <td width="3%">${job.jobGroup }</td>
                <td>${job.jobStatus }
                    <c:choose>
                        <c:when test="${job.jobStatus=='1' }">
                            <a href="javascript:;" onclick="changeJobStatus('${job.id}','0')">停止</a>&nbsp;
                        </c:when>
                        <c:otherwise>
                            <a href="javascript:;" onclick="changeJobStatus('${job.id}','1')">开启</a>&nbsp;
                        </c:otherwise>
                    </c:choose>
                </td>
                <td>${job.triggerState }</td>
                <td width="8%">${job.cronExpression }</td>
                <td>${job.description }</td>
                <td>
                    <c:choose>
                        <c:when test="${job.isConcurrent=='1' }">
                            允许
                        </c:when>
                        <c:otherwise>
                            不允许
                        </c:otherwise>
                    </c:choose>
                </td>
                <td width="3%">${job.beanClass }</td>
                <td>${job.methodName }</td>
                <td>${job.warnTime }</td>
                <td>
                    <a href="javascript:;" onclick="updateCron('${job.id}', '${job.cronExpression}')">更新cron</a>
                    <a href="javascript:;" onclick="updateWarnTime('${job.id}', '${job.warnTime}')">更新预警时间</a>
                </td>
            </tr>
        </c:forEach>
        <tr>
            <td><input type="text" name="springId" id="springId"></td>
            <td><input type="text" name="jobName" id="jobName"></td>
            <td width="3%"><input type="text" name="jobGroup" id="jobGroup"></td>
            <td>
                <select name="jobStatus" id="jobStatus">
                    <option value="0">停止</option>
                    <option value="1">开始</option>
                </select>
            </td>
            <td></td>
            <td width="8%"><input type="text" name="cronExpression" id="cronExpression"></td>
            <td><input type="text" name="description" id="description"></td>
            <td>
                <select name="isConcurrent" id="isConcurrent">
                    <option value="0">不允许并发</option>
                    <option value="1">允许并发</option>
                </select>
            </td>
            <td width="3%"><input type="text" name="beanClass" id="beanClass"></td>
            <td><input type="text" name="methodName" id="methodName"></td>
            <td><input type="text" name="warnTime" id="warnTime"></td>
            <td><input type="button" onclick="add()" value="保存"/></td>
        </tr>
        </tbody>
    </table>
</form>
<script>
    function changeJobStatus(jobId, jobStatus) {
        showWaitMsg();
        $.ajax({
            type: "POST",
            async: false,
            dataType: "JSON",
            cache: false,
            url: "/taskMgr/changeJobStatus",
            data: {
                jobId: jobId,
                jobStatus: jobStatus
            },
            success: function (data) {
                hideWaitMsg();
                if (data.status == 200) {
                    location.reload();
                } else {
                    alert(data.msg);
                }
            }
        });
    }
    function updateWarnTime(jobId, warnTime) {
        var newWarnTime = prompt("输入预警时间！", warnTime);
        if (newWarnTime) {
            showWaitMsg();
            $.ajax({
                type: "POST",
                async: false,
                dataType: "JSON",
                cache: false,
                url: "/taskMgr/updateWarnTime",
                data: {
                    jobId: jobId,
                    warnTime: newWarnTime
                },
                success: function (data) {
                    hideWaitMsg();
                    if (data.status == 200) {
                        location.reload();
                    } else {
                        alert(data.msg);
                    }
                }
            });
        }
    }
    function updateCron(jobId, cron) {
        var newCron = prompt("输入cron表达式！", cron);
        if (newCron) {
            showWaitMsg();
            $.ajax({
                type: "POST",
                async: false,
                dataType: "JSON",
                cache: false,
                url: "/taskMgr/updateCron",
                data: {
                    jobId: jobId,
                    cron: newCron
                },
                success: function (data) {
                    hideWaitMsg();
                    if (data.status == 200) {
                        location.reload();
                    } else {
                        alert(data.msg);
                    }
                }
            });
        }

    }
    function showWaitMsg(msg) {
        if (msg) {

        } else {
            msg = '正在处理，请稍候...';
        }
        var panelContainer = $("body");
        $("<div id='msg-background' class='datagrid-mask' style=\"display:block;z-index:10006;\"></div>").appendTo(panelContainer);
        var msgDiv = $("<div id='msg-board' class='datagrid-mask-msg' style=\"display:block;z-index:10007;left:50%\"></div>").html(msg).appendTo(
                panelContainer);
        msgDiv.css("marginLeft", -msgDiv.outerWidth() / 2);
    }
    function hideWaitMsg() {
        $('.datagrid-mask').remove();
        $('.datagrid-mask-msg').remove();
    }


    function validateAdd() {
        if ($.trim($('#jobName').val()) == '') {
            alert('任务名称不能为空！');
            $('#jobName').focus();
            return false;
        }
        if ($.trim($('#cronExpression').val()) == '') {
            alert('cron表达式不能为空！');
            $('#cronExpression').focus();
            return false;
        }
        if ($.trim($('#beanClass').val()) == '' && $.trim($('#springId').val()) == '') {
            alert('类路径和springId至少填写一个');
            $('#beanClass').focus();
            return false;
        }
        if ($.trim($('#methodName').val()) == '') {
            $('#methodName').focus();
            alert('方法名不能为空！');
            return false;
        }
        if ($.trim($('#warnTime').val()) == '') {
            $('#warnTime').focus();
            alert('预警时间不能为空！');
            return false;
        }
        return true;
    }
    function add() {
        if (validateAdd()) {
            showWaitMsg();
            $.ajax({
                type: "POST",
                async: false,
                dataType: "JSON",
                cache: false,
                url: "/taskMgr/addTask",
                data: $("#addForm").serialize(),//对表单进行序列化
                success: function (data) {
                    hideWaitMsg();
                    if (data.status == 200) {
                        location.reload();
                    } else {
                        alert(data.msg);
                    }
                }
            });
        }
    }
</script>
</body>
</html>




